<template>
  <view v-if="list">
    <view class="button" @click="openMedia()">打开图片/视频</view>
    <!-- 始终竖屏播放：direction="0" -->
    <video v-show="isOpenVideo" id="myVideo" :src="list[0]" @fullscreenchange="fullscreenchange"></video>
  </view>
</template>

<script>
import {previewImage} from "@/utils/review";
export default {
  name: "open-media",
  props: {
    list: {
      type: Array,
      default: []
    },
  },
  data() {
    return {
      isOpenVideo: false,
      videoContext: null
    };
  },
  methods: {
    openMedia() {
      if (this.list[0].indexOf('.mp4') > 0) {
        //打开视频（全屏播放）
        this.isOpenVideo = true
        this.videoContext = uni.createVideoContext('myVideo', this)
        this.videoContext.play()
        this.videoContext.requestFullScreen()
      } else {
        //打开图片
        previewImage(this.list)
      }
    },
    //退出全屏时停止播放
    fullscreenchange(e) {
      console.log(e)
      if (!e.detail.fullScreen) {
        this.videoContext.stop()
        this.isOpenVideo = false
      }
    }
  }
}
</script>

<style lang="scss">
.button {
  width: 230rpx;
  text-align: center;
  padding: 10rpx 20rpx;
  border: 1px solid #000741;
  border-radius: 50rpx;
  margin-top: 15rpx;
}
</style>
